import { useEffect, useState, useRef, type FC } from "react";

type CountDownProps = {
  value: number;
  prefix?: string;
  suffix?: string;
  onFinish?: () => void;
};

const CountDown: FC<CountDownProps> = ({ value, prefix, suffix, onFinish }) => {
  const [count, setCount] = useState(value);
  let timerRef = useRef<NodeJS.Timeout>();

  useEffect(() => {
    timerRef.current = setInterval(() => {
      setCount((prev) => prev - 1);
    }, 1000);

    return () => clearInterval(timerRef.current);
  }, []);

  useEffect(() => {
    if (count === 0) {
      clearInterval(timerRef.current);
      onFinish?.();
    }
  }, [count]);

  return (
    <div>
      {prefix}
      {count}
      {suffix}
    </div>
  );
};

export default CountDown;
